<template>
  <div class="box">
    <ul>
      <li v-for="(item, index) in list" :key="'mov' + index" class="eachMovie">
        <div class="mvPic" @click="filmInfo(item.filmId)">
          <img
            :src="item.poster"
            width="100%"
            height="100%"
            alt="电影图片"
            v-lazy="item.poster"
          />
        </div>
        <div class="mvInfo" @click="filmInfo(item.filmId)">
          <div class="mv-title">
            {{ item.name }}<span class="mv-type">{{ item.item.name }}</span>
          </div>
          <div class="mv-score" v-if="type == 1">
            <span class="audience">观众评分</span
            ><span class="score">{{ item.grade }}</span>
          </div>
          <div class="mv-artists">{{ item.actors | getActors }}</div>
          <div class="" v-if="type == 1">
            {{ item.nation }} <span class="country"> &nbsp;|&nbsp;</span
            >{{ item.runtime }}分钟
          </div>
          <div class="" v-if="type == 0">
            <span>上映日期:&nbsp;</span>{{ item.premiereAt | formatTime }}
          </div>
        </div>
        <div class="mv-buy" @click="tipsBuy">
          <p v-if="type == 1" class="buy">购票</p>
          <p v-else class="buy">订票</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");
export default {
  data() {
    return {};
  },
  // 接收传递过来的参数
  props: ["list", "type"],
  methods: {
    // 通过id进到详情页面
    filmInfo(filmId) {
      this.$router.push(`/detail/${filmId}`);
    },
    tipsBuy() {
      console.log(this);
      this.$toast.fail({
        mask: "true",
        message: "暂不支持购票功能",
        duration: 1000,
      });
    },
  },
  mounted() {
    console.log(this);
    console.log("页面刷新了");
  },
  filters: {
    // 返回以空格连接的演员列表
    getActors(actorList) {
      let actorArr = actorList.map((item) => {
        return item.name;
      });
      return actorArr.join(" ");
    },
    // 格式化播放时间
    formatTime(times) {
      return moment(times).format("dddd");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  padding: 2vh;
  padding-bottom: 8vh;
  .eachMovie {
    list-style-type: none;
    display: flex;
    height: 20vh;
    width: 90vw;
    border-bottom: 1px solid #ccc;
    padding: 3vw;
    justify-content: space-between;
    align-items: center;
    .mvPic {
      height: 14vh;
      width: 26vw;
      max-width: 90px;
      min-width: 64px;
      background-color: blue;
    }
  }

  .mvInfo {
    width: 100%;
    height: 100%;
    font-size: 13px;
    padding: 1vw;
    display: flex;
    color: #797d82;
    flex-direction: column;
    justify-content: center;
    .mv-title {
      color: #191a1b;
      font-size: 16px;
      margin-bottom: 5px;
      .mv-type {
        color: #fff;
        font-size: 14px;
        margin-left: 4px;
        background-color: #d2d6dc;
        border-radius: 2px;
        vertical-align: center;
      }
    }
    .mv-score {
      margin-bottom: 5px;
      .audience {
        margin-right: 5px;
      }
    }
    .mv-artists {
      margin-bottom: 1px;
      width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .score {
      color: #ffb232;
      font-size: 14px;
    }
  }
  .mv-buy {
    display: flex;
    width: 24vw;
    height: 100%;
    justify-content: center;
    align-items: center;
    .buy {
      display: block;
      width: 70px;
      height: 26px;
      line-height: 26px;
      text-align: center;
      color: orange;
      border: 1px solid orange;
      border-radius: 5px;
    }
  }
}
</style>